<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /* 
            vw 是视口宽度1/100
            375  /100   3.75  10个37.5视口宽度
            */

            /* width: 10vw;
            height: 10vw; */


            /* 
            vh是视口高度的1/100
           667  /100  6.67 10 66.7
            *
            /* width: 10vw;
            height: 10vh; */
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">

        适配 通过相对单位并且检测设备的宽度来实现适配的
        rem适配 配合flexible
        vw vh 适配不需要配合flexibale  尽量不要同时使用vw vh
    </div>
</body>
</html>